import React, { createContext, useState, useContext } from "react";

export default function ContextDemo() {

  const CountContext = createContext()

  const [count, setCount] = useState(0)

  const Counter = (props) => {
    console.log('打印props:', props)
    const count1 = useContext(CountContext)    //一句话就可以得到count1
    return (<h2>{count1}</h2>)
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={()=>{ setCount(count + 1) }}>click me</button>
      <CountContext.Provider value={count}>
        <Counter data={count}/>
      </CountContext.Provider>
    </div>
  )
}

/**
 * 这段代码就相当于把count变量允许跨层级实现传递和使用了（也就是实现了上下文），
 * 当父组件的count变量发生变化时，子组件也会发生变化。
 * 接下来我们就看看一个React Hooks的组件如何接收到这个变量。
 */